<template lang="pug">
  a-dropdown(placement="bottomCenter")
    a(class="ant-dropdown-link" @click="e => e.preventDefault()")
      a-button(type="link" class="userName") 管理员
        a-icon(type="down")
    a-menu(slot="overlay")
      a-menu-item(key="0")
        a(target="_blank" @click="showList") 购物清单
      a-menu-divider
      a-menu-item(key="1")
        a(target="_blank" @click="eventOne") 消息
      a-menu-divider
      a-menu-item(key="2")
        a(target="_blank" @click="eventOne") 个人资料
      a-menu-divider
      a-menu-item(key="3")
        a(target="_blank" @click="eventOne") 设置
      a-menu-divider
      a-menu-item(key="4" @click="showConfirm") 退出
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

@Component
export default class UserAccount extends Vue {

  public showList() {
    this.$router.push({path:'/showList'})
  }

  public eventOne() {
    this.$router.push({path:'/404'})
  }

  //退出
  public showConfirm() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const self = this;
    this.$confirm({
      title: '您确定要退出登录吗？',
      content: '请选择',
      okText: '确定',
      cancelText: '取消',
      maskClosable: true,
      onOk() {
        self.$router.push({path:"/"});
        self.$message.success('您已经成功退出登录！！！');
      },
      onCancel() {
        self.$message.info('您取消了该操作！！！');
      },
      class: '提示：',
    })
  }
}
</script>

<style lang="stylus" scoped>
.userName{
  margin-left 50px
  font-size: 2vm;
}
</style>
